<template>
	<div>
		<HfTable :data-array="orders || []" :options="options" :default-sort="{ prop: 'OrderSysID', order: 'descending' }" height="300">
			<template #Direction="{ scope, editing }">
				{{ scope.row.Direction === '0'.charCodeAt(0) ? '买' : '卖' }}
			</template>
			<template #CombOffsetFlag="{ scope, editing }">
				{{ scope.row.CombOffsetFlag === 48 ? '开仓' : scope.row.CombOffsetFlag === 49 ? '平仓' : '平今' }}
			</template>
			<template #LimitPrice="{ scope, editing }">
				{{ scope.row.LimitPrice.toFixed(2) }}
			</template>
		</HfTable>
	</div>
</template>

<script setup lang="ts">
import type { TableOptions } from '~/components/types.ts'

const options: TableOptions[] = [
	{
		label: '报单编号',
		prop: 'OrderSysID',
		width: 100,
	},
	{
		label: '合约',
		prop: 'InstrumentID',
		width: 100,
	},
	{
		label: '交易所',
		prop: 'ExchangeID',
		width: 100,
	},
	{
		label: '买卖',
		prop: 'Direction',
		useSlot: true,
		width: 80,
	},
	{
		label: '开平',
		prop: 'CombOffsetFlag',
		useSlot: true,
		width: 80,
	},
	{
		label: '价格',
		prop: 'LimitPrice',
		useSlot: true,
		width: 100,
	},
	{
		label: '手数',
		prop: 'VolumeTotalOriginal',
		width: 80,
	},
	{
		label: '未成交',
		prop: 'VolumeTotal',
		width: 80,
	},
	{
		label: '成交',
		prop: 'VolumeTraded',
		width: 80,
	},
	{
		label: '时间',
		prop: 'OrderTime',
		width: 100,
	},
	{
		label: '状态',
		prop: 'StatusMsg',
		width: 160,
	},
]

const { data: orders, refresh: refreshOrder } = await useHttp.getLazy<Order[]>('/order')

const { data: order } = useSSE('order')
watch(order, () => {
	refreshOrder()
})

onMounted(() => refreshOrder())
</script>

<style scoped></style>
